<script setup lang="ts">
import { ref, reactive, onUpdated } from 'vue';
import { active, activeDel, scienList, ticketStatus, asst_add } from '../../../api/active/index';
import { ElMessage, ElCard } from 'element-plus';
import { scenicUpload } from '../../../api/uploading/index';
import { inject } from 'vue'
const dialogVisible = ref(false);
const state = ref(false)
const status_state = ref('')
const stattess = ref('2')
// 富文本
const editorConfig = reactive({
	// 编辑器不自动被内容撑高
	autoHeightEnabled: false,
	// 初始容器高度
	initialFrameHeight: 200,
	// 初始容器宽度
	initialFrameWidth: '60vw',
	UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径，可参考常见问题1
	serverUrl: '/pc/common/ueditor', // 服务端接⼝
	uploadUrl: '/UEditor',
	// enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId，否则组件会默认随机⼀个，如果页⾯刷新，下次渲染的时候 editorId 会重新随机，// 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
});
// 地图引入
// 引入高德地图API
import { load } from "@amap/amap-jsapi-loader";
// 用户输入的地点关键字
const searchKeyword = ref("");
let map = null; //初始化地图
let placeSearch = null; // 声明placeSearch变量
let lati = ref('');
let longi = ref('');
onUpdated(async () => {
	// 设置高德地图的安全配置【此处一定要配置，否则会搜索失败】
	window._AMapSecurityConfig = {
		securityJsCode: "34068d35a8585449adcfdfc5b28b5006",
	};
	// 初始化地图
	map = await initMap();
	// 加载插件并绑定事件
	({ placeSearch } = await loadPluginsAndBindEvents(map)); // 返回并解构出placeSearch
});
// 初始化高德地图实例
async function initMap() {
	// 加载高德地图API，包括指定的版本和插件
	const defaultCenter = [113.85, 35.30];
	const AMap = await load({
		key: "635f2e7ebbd699fa68ef6fad1494f713", // 高德地图API Key
		version: "2.0",
		plugins: ["AMap.PlaceSearch", "AMap.AutoComplete"],
		zoom: 10,
		center: [longi.value, lati.value]
	});
	// 创建地图实例，设置容器ID和允许自适应窗口大小
	return new AMap.Map("container", {
		resizeEnable: true,
		viewMode: "2D",
		zoom: 11,
		center: longi.value && lati.value
			? [parseFloat(longi.value), parseFloat(lati.value)]
			: defaultCenter,
	});
}
// 加载插件并绑定事件
async function loadPluginsAndBindEvents(map) {
	const autoOptions = {
		input: "tipinput", //绑定到输入框的ID
	};
	// 创建自动完成实例
	const auto = new AMap.AutoComplete(autoOptions);
	// 创建地点搜索实例，关联到地图
	const ps = new AMap.PlaceSearch({
		map: map,
	});
	// 绑定自动完成的选中事件，根据选中的地点设置城市并执行搜索
	auto.on("select", (e) => {
		ps.setCity(e.poi.adcode); //设置搜索城市为选中地点的城市编码
		ps.search(e.poi.name); //搜索选中地点的名称
	});
	// 地图点标记
	map.on('click', function (e) {
		ruleForm.latitude = e.lnglat.getLng();
		ruleForm.longitude = e.lnglat.getLat();
	});
	if (longi.value && lati.value) {
		const marker = new AMap.Marker({
			position: [parseFloat(longi.value), parseFloat(lati.value)],
		});
		map.add(marker);
	}
	return { placeSearch: ps }; // 返回placeSearch实例
}
// 点击搜索
const searchs = () => {
	// 判断用户是否输入了关键字
	if (!searchKeyword.value.trim()) {
		ElMessage.error("请输入搜索内容！");
		return;
	}
	// 执行地点搜索，并处理搜索结果
	placeSearch.search(searchKeyword.value, (status, result) => {
		console.log(status, result);
		console.log(result.poiList.pois[0].location.lat);
		ruleForm.longitude = result.poiList.pois[0].location.lat
		ruleForm.latitude = result.poiList.pois[0].location.lng

		if (status === "complete" && result.info === "OK") {
			// 如果搜索成功且有搜索结果
			if (result.poiList.pois.length > 0) {
				// 取第一个搜索结果，设置地图中心和缩放级别
				const poi = result.poiList.pois[0];
				map.setCenter([poi.location.lng, poi.location.lat]);
				map.setZoom(15); //缩放级别
			} else {
				ElMessage.error("未找到相关地点！");
			}
		} else {
			ElMessage.error("搜索失败！");
		}
	});
}
// 创建数据变量
const activeList = ref([]);
const activeStatu = ref(true)
const activeStatud = ref(false)
const testFn = inject('testFn')
testFn()
const testName = inject('testName')
const dialogTableVisible = ref(false);
const statused = ref('1');
// 表格页码数
const inputed = ref('');
const pageSize = ref(5);
const currentPage = ref(1);
const copyList = ref([]);
const files = ref(false);
// 搜索框下拉
const value = ref('')
const options = [
	{
		value: '1',
		label: '上架',
	}, {
		value: '2',
		label: '下架'
	}]
// 请求接口并开局渲染
let tokens = JSON.parse(localStorage.getItem('tokens'));

render();
function render() {
	scienList({
		token: tokens.token,
		uid: tokens.userinfo.id
	}, {
		userid: tokens.userinfo.id
	}).then((res) => {
		console.log(res);
		activeList.value = res.data;
		copyList.value = res.data;
	});
}

// 景区分类列表数据
const categoryList = ref([]);

renders()//请求分类列表数据
function renders() {
	active({
		token: tokens.token,
		uid: tokens.userinfo.id
	}, {
		userid: tokens.userinfo.id
	}).then((res) => {
		console.log(res, '分类数据');
		categoryList.value = res.data || [];
	});
}
// 上传图片返回路径
const fileImg = ref([])
const Delete = ref('')
const fileList = ref([])
const fileListQW = ref([])
// 照片移除后的数据
const fileremover = ref([])
const iitimg = ref([])
// 图片移除
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	console.log(uploadFile)
	console.log(uploadFiles)
	if (uploadFiles.length < 1) {
		ruleForm.img = ''
	}
	const formData = new FormData();
	formData.append('file', uploadFile.raw);
	scenicUpload(formData).then(res => {
		console.log(res.data.url);
		for (let i = 0; i < iitimg.value.length; i++) {
			if (iitimg.value[i] == res.data.url) {
				iitimg.value.splice(i, 1)
				break;
			}
		}
	})
	for (let i = 0; i < iitimg.value.length; i++) {
		if (iitimg.value[i] == uploadFile.url.slice(testName.length, 106)) {
			iitimg.value.splice(i, 1)
			break;
		}
	}
	console.log(iitimg.value);
}
const dialogImageUrl = ref('')
const dialogVisiblet = ref(false)
const dialogImageUrlt = ref('')
// 图片放大视图
const handlePictureCardPreview = (file) => {
	// console.log(file.raw.name);
	dialogImageUrl.value = file.url;
	dialogVisible.value = true;
}
const imgList = ref([])
// 图片超出限制
const exceed_li = () => {
	ElMessage({
		message: '最多可上传四张',
		type: 'warning',
	})
}
// 图片上传回调函数
const handleChange = (file, fileLists) => {
	const fileName = file.name
	const fileType = fileName.substring(fileName.lastIndexOf('.'))
	const formData = new FormData();
	formData.append('file', file.raw);
	scenicUpload(formData).then(res => {
		console.log(res.code);
		if (res.code == 1) {
			ruleForm.img = res.data.url
			console.log(res.data, '上传成功');
			fileImg.value.push(res.data.url)
			fileremover.value.push(res.data.url)
			imgList.value.push(res.data.url.split(','))
			iitimg.value.push(res.data.url)
		} else if (res.code == 0) {
			ElMessage.error('图片不能大于2MB!')
			for (let i = 0; i < fileLists.length; i++) {
				if (i === fileLists.length - 1) {
					fileLists.splice(i, 1)
				}
			}
		}
	})
	// }
	// jpeg,.png,.jpg,.bmp,.gif
	if (
		fileType === '.jpg' ||
		fileType === '.png' ||
		fileType === '.jpeg' ||
		fileType === '.bmp' ||
		fileType === '.gif'
	) {
	} else {
		ElMessage.error('不是,jpeg,.png,.jpg,.bmp,.gif文件,请上传正确的图片类型')
		return false
	}
	console.log(file);
	console.log(file.raw);




};
// success成功回调函数 图片
const handleSuccess = (response, file, fileList) => {

	console.log('File uploaded successfully:', response, file, fileList);
	console.log(fileImg.value);

};

const beforeUpload = (rawFile) => {
	console.log(rawFile);
	console.log(1);


	if (rawFile.type !== 'image/jpeg') {
		ElMessage.error('Avatar picture must be JPG format!')

		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!')

		return false
	}
	return true
}

// 图片放大查看
const fileListt = ref([]);
const handlePictureCardPreviewt = (file) => {
	// console.log(file.raw.name);
	dialogImageUrlt.value = file.url;
	dialogVisiblet.value = true;
}
// 图片移除
const handleRemovet = (file, fileListt) => {
	console.log(file, fileListt);
	if (fileListt.length < 1) {
		ruleForm.covers = ''
	}
};
// 图片上传回调事件
const beforeAvatarUploadt = (file) => {
	const fileName = file.name
	const fileType = fileName.substring(fileName.lastIndexOf('.'))
	// jpeg,.png,.jpg,.bmp,.gif
	if (
		fileType === '.jpg' ||
		fileType === '.png' ||
		fileType === '.jpeg' ||
		fileType === '.bmp' ||
		fileType === '.gif'
	) {
	} else {
		ElMessage.error('不是,jpeg,.png,.jpg,.bmp,.gif文件,请上传正确的图片类型')
		return false
	}
	console.log(file);
	// 压缩图片
	compressImage(file).then(compressedBlob => {
		const formData = new FormData();
		formData.append('file', compressedBlob, file.name);
		if (file.size / 1024 / 1024 > 2) {
			console.log(file.size / 1024 / 1024);
			ElMessage.error('图片不能大于2MB!')
			return false
		} else {

			console.log(formData);
			scenicUpload(formData).then(res => {
				console.log(res);

				// fileImg.cover = res.data.url
				fileListt.value = [{
					name: 'plant-1.png',
					url: testName + res.data.url,
				}]
				ruleForm.covers = res.data.url
			})
		}
	});
	return false; // 阻止默认上传行为

}
const compressImage = (file) => {
	const reader = new FileReader();
	reader.readAsDataURL(file);
	return new Promise((resolve) => {
		reader.onload = e => {
			const img = new Image();
			img.src = e.target.result;
			img.onload = () => {
				const canvas = document.createElement('canvas');
				const ctx = canvas.getContext('2d');
				const { width, height } = img;
				canvas.width = width;
				canvas.height = height;
				ctx.drawImage(img, 0, 0, width, height);
				// 可以在这里调整压缩质量和尺寸
				const quality = 0.7; // 压缩质量
				const newImageData = canvas.toDataURL('image/jpeg', quality);
				const resizedBlob = dataURLtoBlob(newImageData);
				console.log(ctx);
				resolve(resizedBlob);
			};
		};
	});
};
const dataURLtoBlob = (dataurl) => {
	const arr = dataurl.split(',');
	const mime = arr[0].match(/:(.*?);/)[1];
	const bstr = atob(arr[1]);
	let n = bstr.length;
	const u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], { type: mime });
};

// 景区上下架
let statust = ref('');
function funstatus(e) {
	console.log(e);
	if (e.state == '1') {
		statust.value = '2';
	} else if (e.state == '2') {
		statust.value = '1';
	}
	console.log(statust.value);
	ticketStatus(
		{
			token: tokens.token,
			uid: tokens.userinfo.id,
		},
		{
			userid: tokens.userinfo.id,
			id: e.id,
			state: statust.value
		}
	).then((res) => {
		console.log(res);
		if (res.code == 1) {
			ElMessage({
				message: '操作成功',
				type: 'success',
			});
			render();
		} else if (res.code == 0) {
			ElMessage({
				message: res.msg,
				type: 'warning',
			});
		}
	});
}

// 表单对象
const ruleForm = reactive({
	name: '',
	img: '',
	classid: '', // 初始值设为空，将由下拉框选择
	honor: '',
	tel: '',
	starttime: '',
	address: '',
	lng: '',
	lat: '',
	score: '',
	covers: '',
	introduce: '',
});
const ruleFormRef = ref('');
const rules = reactive({
	name: [
		{
			required: true,
			message: '请输入分类名称',
			trigger: 'blur',
		},
	],
	classid: [
		{
			required: true,
			message: '请选择景点分类',
			trigger: 'change', // 修改为change事件
		},
	],
	honor: [
		{
			required: true,
			message: '请输入景点荣誉',
			trigger: 'blur',
		}
	],
	tel: [
		{
			required: true,
			message: '请输入景点电话',
			trigger: 'blur',
		},
	],
	img: [
		{
			required: true,
			message: '请上传轮播图片',
			trigger: 'change',
		},
	],
	starttime: [
		{
			required: true,
			message: '请输入营业时间',
			trigger: 'change',
		},
	],
	score: [
		{
			required: true,
			message: '请输入店铺地址',
			trigger: 'change',
		},
	],
	address: [
		{
			required: true,
			message: '请输入景点地址',
			trigger: 'change',
		},
	],
	lng: [
		{
			required: true,
			message: '请输入经度',
			trigger: 'change',
		},
	],
	lat: [
		{
			required: true,
			message: '请输入维度',
			trigger: 'change',
		},
	],
	covers: [
		{
			required: true,
			message: '请上传图片',
			trigger: 'change',
		},
	],
	introduce: [
		{
			required: true,
			message: '请输入简介',
			trigger: 'change',
		},
	],

});

function validateEmailDomain(rule, value, callback) {
	if (value === '') {
		callback(new Error('结束时间不能为空'));
	} else if (value < ruleForm.start_time) {
		// 假设我们只允许 @example.com 的邮箱  
		callback(new Error('结束时间不能小于开始时间'));
	} else {
		callback();
	}
}
// 点击确认或编辑
const submitForm = (formEl) => {
	console.log(iitimg.value.join(','));
	console.log(iitimg.value);

	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {


			if (statused.value == '2') {
				console.log(iitimg.value.join(','));

				asst_add({ token: tokens.token, uid: tokens.userinfo.id }, {
					user_id: tokens.userinfo.id,
					id: ids.value,
					title: ruleForm.name,
					image: ruleForm.covers,
					banner: iitimg.value.join(','),
					score: ruleForm.score,
					honor: ruleForm.honor,
					address: ruleForm.address,
					lng: ruleForm.lng,
					lat: ruleForm.lat,
					tel: ruleForm.tel,
					content: ruleForm.introduce,
					price: '1',
					classid: ruleForm.classid, // 现在是分类ID
					starttime: ruleForm.starttime,
					state: stattess.value
				}).then((res) => {
					if (res.code == '1') {
						ElMessage({
							message: '编辑成功',
							type: 'success',
						});
						setTimeout(() => {
							activeStatud.value = false;
							activeStatu.value = true;
							fileList.value = []
						}, 1200);
						render();
					} else {
						console.log(res);

						ElMessage({
							message: '编辑失败，不能和原数据一致',
							type: 'warning',
						});
					}
				});
			}
		}
		else {
			ElMessage({
				message: '编辑失败',
				type: 'error',
			});

		}
	});
};

const ids = ref('');
const disableds = ref(true);
// 关闭新增
const closes = (formEl) => {
	console.log(formEl);
	activeStatu.value = true
	activeStatud.value = false
	formEl.resetFields();
	formEl.clearValidate()
	dialogTableVisible.value = false;
	files.value = false;
	ruleForm.name = ''
	fileList.value = []

};
// 点击编辑
function edit(item) {
	console.log(item);
	lati.value = item.lat;
	longi.value = item.lng;
	console.log(lati.value);
	// 重新初始化地图以应用新坐标
	initMap().then(newMap => {
		map = newMap;
		loadPluginsAndBindEvents(map);
	});
	stattess.value = item.state
	ids.value = item.id;
	activeStatud.value = true
	activeStatu.value = false
	ruleForm.name = item.title
	ruleForm.score = item.score
	ruleForm.honor = item.honor
	ruleForm.tel = item.tel
	ruleForm.starttime = item.starttime
	ruleForm.address = item.address
	ruleForm.lng = item.lng
	ruleForm.lat = item.lat
	iitimg.value = item.banner.split(',')

	Delete.value = item.banner
	ruleForm.introduce = item.content
	ruleForm.covers = item.image
	ruleForm.img = item.banner.split(',')
	// 封面图片回显
	fileListt.value = [{
		url: testName + item.image,
	}]
	for (let i = 0; i < item.banner.split(',').length; i++) {
		console.log(item.banner.split(','));
		fileListQW.value.push(testName + item.banner.split(',')[i])
		fileList.value.push(
			{
				url: testName + item.banner.split(',')[i],
			});
	}
	disableds.value = false;
	statused.value = '2';

	// 设置选中的分类ID
	ruleForm.classid = item.classid || ''; // 假设接口中分类ID字段为classid
}
// 点击上传出现弹窗
function deletes(item) {
	console.log(item);
	centerDialogVisible.value = true;
	deleteids.value = item.id;
}

const deleteids = ref('');
const centerDialogVisible = ref(false);

// 确认删除
function deleteid() {
	activeDel(
		{
			token: tokens.token,
			uid: tokens.userinfo.id,
		},
		{
			userid: tokens.userinfo.id,
			id: deleteids.value,
		}
	).then((res) => {
		if (res.code == '1') {
			centerDialogVisible.value = false;
			ElMessage({
				message: '删除成功',
				type: 'success',
			});
			render();
		}
	});
}
// 分类名称搜索
function filters() {
	currentPage.value = 1
	console.log(inputed.value);
	let a = [];
	activeList.value = copyList.value.filter(function (item) {
		// 判断是否满足搜索条件
		if (String(item.title).indexOf(String(inputed.value)) > -1) {
			return a;
		}
	});
	currentPage.value = 1

}
// 上下架搜索
const ange_indexof = (e) => {
	console.log(e);
	if (e == undefined) {
		render()
	}
	let a = [];
	activeList.value = copyList.value.filter(function (item) {
		// 判断是否满足搜索条件
		if (String(item.state).indexOf(String(e)) > -1) {
			return activeList;
		}
	});
	currentPage.value = 1

}
const shows = ref(false);
// 删除批量
// 全选单选
const SelectArr = ref([])
const All_Delete = ref([])
const handleSelectionChange = (val) => {
	All_Delete.value = []
	SelectArr.value = val
	SelectArr.value.forEach(item => {
		console.log(item);
		All_Delete.value.push(item.id)
	})
	console.log(All_Delete.value);
}
// 批量删除
// 批量删除
const centerDialogVisiblet = ref(false)
const st = ref([])
function deleList() {
	st.value = []
	console.log(All_Delete.value);
	st.value.push(All_Delete.value)
	if (All_Delete.value == '') {
		ElMessage({
			message: '请勾选要删除的游玩',
			type: 'warning',
		})
	} else {
		centerDialogVisiblet.value = true
	}
}
// 确认批量删除
const deleteid_t = () => {
	activeDel({
		token: tokens.token,
		uid: tokens.userinfo.id
	}, {
		userid: tokens.userinfo.id,
		id: st.value.join(','),

	}).then(res => {
		console.log(res, '删除成功或失败回调');
		centerDialogVisiblet.value = false;
		render();
		ElMessage({
			message: '删除成功',
			type: 'success',
		})
	})
}
</script>
<template>
	<div>
		<div v-show="activeStatu">
			<el-card class="box">
				<!-- 搜索筛选名称或标题 -->
				<div class="search-container">
					<div class="flex">
						<div class="scenic-name-label">景区名称</div>
						<div class="time_top">上架/下架</div>
					</div>
					<div class="flexBox">
						<div class="input-container">
							<el-input v-model.trim="inputed" @input="filters" placeholder="输入内容">
								<template #prefix>
									<el-icon class="el-input__icon">
										<search />
									</el-icon>
								</template>
							</el-input>
						</div>
						<div class="select-container">
							<el-select v-model="value" @change="ange_indexof" clearable placeholder="请选择">
								<el-option v-for="item in options" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
					<div class="spacer"></div>
					<!-- table表格数据展示 -->
					<div>
						<el-table :data="activeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
							style="margin-top: 10px;width: 100%;" :cell-style="{ 'text-align': 'center' }" lazy="true"
							v-el-table-infinite-scroll="handleTableScroll"
							:header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange"
							height="auto">
							<el-table-column type="selection" fixed="left" />
							<el-table-column prop="id" label="序号" fixed="left" />
							<el-table-column prop="title" min-width="120" label="景区名称" show-overflow-tooltip />
							<el-table-column prop="" min-width="120" label="景区状态">
								<template #default="scope">
									<div class="handle">
										<el-switch @change="funstatus(scope.row)"
											:model-value="scope.row.state == 1 ? true : scope.row.state == 2 ? false : scope.row.state"
											inline-prompt />
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="imgs" label="图片" width="130">
								<template #default="scope">
									<div>
										<el-image style="width: 40px; height: 40px" :src="testName + scope.row.image"
											:zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
											:preview-src-list="[testName + scope.row.image]" :initial-index="4"
											fit="cover" preview-teleported />
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" min-width="120" label="景区地址" show-overflow-tooltip />
							<el-table-column prop="tel" min-width="120" label="景区电话" />
							<el-table-column width="190" prop="createtime" label="创建时间" />
							<el-table-column label="操作" width="150" fixed="right">
								<template #default="scope">
									<div class="handle">
										<div @click="edit(scope.row)" class="edit-btn">编辑</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>

					<div class="paging">
						<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
							:page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled" background
							layout="total, sizes, prev, pager, next, jumper" :total="activeList.length" />
					</div>
					<el-dialog title="删除" v-model="centerDialogVisible" width="30%" center>
						<div class="dialog-message">确认删除该游玩吗?</div>
						<div class="dialog-buttons">
							<el-button @click="centerDialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="deleteid">确 定</el-button>
						</div>
					</el-dialog>
				</div>
				<el-dialog v-model="shows" title="是否要删除" center width="20vw">
					<el-button @click="shows = false">取 消</el-button>
					<el-button type="primary" @click="oks">确 定</el-button>
				</el-dialog>
				<!-- 批量删除 -->
				<el-dialog title="批量删除" v-model="centerDialogVisiblet" width="30%" center>
					<div class="dialog-message">确认删除这批数据吗?</div>
					<span slot="footer" class="dialog-footer">
						<div></div>
						<div>
							<el-button @click="centerDialogVisiblet = false">取 消</el-button>
							<el-button type="primary" @click="deleteid_t">确 定</el-button>
						</div>
					</span>
				</el-dialog>
			</el-card>
		</div>
		<!-- ---------------------------------第二块 --------------------------------------------------->
		<div v-show="activeStatud" class="edit-container">
			<el-card class="edit-card">
				<div class="edit-title">编辑</div>
				<div class="divider"></div>
				<div class="form-container">
					<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-position="left"
						label-width="auto" class="demo-ruleForm">
						<div class="form-row">
							<div class="form-column">
								<el-form-item label="分类名称" prop="name">
									<el-input v-model.trim="ruleForm.name" placeholder="请输入" />
								</el-form-item>
								<el-form-item label="店铺评分" prop="score">
									<el-rate v-model="ruleForm.score" allow-half />
								</el-form-item>
								<el-form-item label="景区分类" prop="classid">
									<!-- 修改为下拉框 -->
									<el-select v-model="ruleForm.classid" placeholder="请选择景区分类" clearable>
										<el-option v-for="item in categoryList" :key="item.id" :label="item.title"
											:value="item.id" />
									</el-select>
								</el-form-item>
								<el-form-item label="景区荣誉" prop="honor">
									<el-input v-model.trim="ruleForm.honor" placeholder="请输入" />
								</el-form-item>
								<el-form-item label="景区电话" prop="tel">
									<el-input v-model.number="ruleForm.tel" placeholder="请输入" type="number"
										@input="ruleForm.tel = $event.replace(/[^\d]/g, '')" maxlength="11"
										pattern="\d{11}" />
								</el-form-item>
								<el-form-item label="营业时间" prop="businessHours">
									<el-time-picker v-model="ruleForm.businessHours" is-range range-separator="至"
										start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择营业时间范围"
										format="HH:mm:ss" value-format="HH:mm:ss" />
								</el-form-item>
								<!-- 单图封面图片 -->
								<el-form-item prop="covers" label="封面图片">
									<el-upload list-type="picture-card" accept=".jpeg,.png,.jpg,.bmp,.gif"
										:on-preview="handlePictureCardPreviewt" :on-remove="handleRemovet"
										:file-list="fileListt" :before-upload="beforeAvatarUploadt">
										<el-icon>
											<Plus />
										</el-icon>
									</el-upload>
								</el-form-item>

							</div>
							<div class="form-column">
								<!-- 多图片上传   -->
								<el-form-item prop="img" label="景点轮播">
									<el-upload list-type="picture-card" accept=".jpeg,.png,.jpg,.bmp,.gif"
										:on-exceed="exceed_li" :on-preview="handlePictureCardPreview"
										:on-remove="handleRemove" :file-list="fileList" :on-change="handleChange"
										:on-success="handleSuccess" :before-upload="beforeUpload" :auto-upload="false"
										:limit="4">
										<el-icon>
											<Plus />
										</el-icon>
									</el-upload>
								</el-form-item>
								<el-form-item label="景区地址" prop="address">
									<el-input v-model.trim="ruleForm.address" placeholder="请输入" />
								</el-form-item>
								<el-form-item label="经度" prop="lng">
									<el-input v-model.trim="ruleForm.lng" placeholder="请输入" />
								</el-form-item>
								<el-form-item label="维度" prop="lat">
									<el-input v-model.trim="ruleForm.lat" placeholder="请输入" />
								</el-form-item>
								<el-form-item label="店铺地址" prop="">
									<div class="map-search-container">
										<el-input id="tipinput" v-model.trim="searchKeyword" placeholder="请输入关键字"
											clearable />
										<el-button type="primary" @click="searchs">搜索</el-button>
									</div>
									<div id="container" class="map-container"></div>
								</el-form-item>
							</div>
						</div>
						<div class="spacer-large"></div>
						<!-- 富文本 -->
						<el-form-item label="景区介绍" prop="introduce">
							<vue-ueditor-wrap style="width: 80%;height:300px" v-model="ruleForm.introduce"
								:config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
						</el-form-item>
						<div class="spacer-large"></div>
					</el-form>
					<div class="form-actions">
						<el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
						<el-button @click="closes(ruleFormRef)">取消</el-button>
					</div>
				</div>
			</el-card>
		</div>
		<!-- 点击确认取消 -->
		<el-dialog v-model="dialogVisible">
			<img class="preview-image" :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
		<el-dialog v-model="dialogVisiblet">
			<img class="preview-image" :src="dialogImageUrlt" alt="Preview Image" />
		</el-dialog>
	</div>
</template>


<style>
/* 你的样式 */
@import url("https://cache.amap.com/lbs/static/main1119.css");

.text {
	font-size: 14px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
}

.clearfix:after {
	clear: both;
}

.box-card {
	display: flex;
	height: 300px;
	width: 90%;
}

.handle {
	display: flex;
	align-items: center;
	justify-content: center;
}

.paging {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	height: 70px;
}

.flex {
	display: flex;
	align-items: center;
	padding-bottom: 10px;
}

.flexBox {
	display: flex;
	width: 100%;
	align-items: center;
}

.el-upload-list--picture-card {
	--el-upload-list-picture-card-size: 100px;
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0;
}

.custom-upload {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 350px;
}

.el-form-item__content {
	align-items: center;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	font-size: var(--font-size);
	line-height: 32px;
	min-width: 0;
	position: relative;
	/* max-width: 350px; */
}

.el-upload--picture-card {
	--el-upload-picture-card-size: 99px;
	align-items: center;
	background-color: var(--el-fill-color-lighter);
	border: 1px dashed var(--el-border-color-darker);
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	height: var(--el-upload-picture-card-size);
	justify-content: center;
	vertical-align: top;
	width: var(--el-upload-picture-card-size);
}

/* 新增样式 */
.search-container {
	padding: 10px;
}

.scenic-name-label {
	width: 220px;
}

.input-container {
	width: 220px;
}

.select-container {
	margin-left: 20px;
	width: 240px;
}

.spacer {
	padding-bottom: 40px;
}

.edit-btn {
	color: rgba(64, 158, 255, 1);
	cursor: pointer;
}

.dialog-message {
	font-size: 16px;
	padding-bottom: 20px;
}

.dialog-buttons {
	display: flex;
	justify-content: end;
}

.edit-container {
	padding: 10px;
}

.edit-card {
	width: 96%;
	margin-left: 2%;
	margin-top: 1%;
	position: relative;
	height: auto;
}

.edit-title {
	padding: 10px;
}

.divider {
	width: 100%;
	height: 1px;
	background-color: rgba(195, 195, 195, 1);
}

.form-container {
	margin-top: 50px;
	margin-left: 100px;
}

.form-row {
	display: flex;
	width: 90%;
	justify-content: space-between;
}

.form-column {
	width: 48%;
}

.form-column .el-form-item {
	width: 90%;
}

.map-search-container {
	width: 90%;
	display: flex;
	align-items: center;
	height: 166px;
}

.spacer-large {
	height: 100px;
}

.form-actions {
	position: absolute;
	bottom: 10px;
	right: 40px;
}

.preview-image {
	width: 90%;
	height: 90%;
}
</style>